<template>
  <div class="WithdrawDeposit">
    <div class='title'>
      <span></span>
      <span>提现申请</span>
    </div>
    <div class='WithdrawDepositbottom'>
      <div class="boxStyle">
        <div>可提现金额：</div>
        <input type="text" :value="rewardBalance" class="bdColor" disabled>
      </div>
      <div class="boxStyle moneyStyle">
        <div class="subTitle">*提现金额：</div>
        <div class="subMoney">
          <input type="number" v-model="money" @keyup="onMoneyChange" placeholder="请输入提现金额" @mousewheel='disabledwheel($event)'>
          <span>200元起提，100元的整數倍。 單次最高{{rechargeMax}}元。</span>
        </div>
      </div>
      <div class="boxStyle moneyStyle">
        <div>手续费：</div>
        <!-- <input type="text" :value="rechargeFee*money" class="bdColor" disabled> -->
        <div class="subMoney">
          <input type="text" :value="rechargeFee*money" class="bdColor" disabled>
          <span>{{'手续费比例'+rechargeFee*100+"%"}}</span>
        </div>
      </div>

      <div class="boxStyle">
        <div>*提现通证数量：</div>
        <input type="text" v-model="prove" class="bdColor" disabled>
      </div>
      <div class="boxStyle">
        <div>手机号码：</div>
        <input type="text" :value="phone" class="bdColor" disabled>
      </div>
      <div class="boxStyle padStyle">
        <div>短信验证：</div>
        <input class="wStyle" type="text" v-model="code" placeholder="请输入手机验证码">
        <el-button class="noteStyle" type="warning" :plain="true" @click="getyzm">获取验证码</el-button>
      </div>
      <div class="boxStyle">
        <div></div>
        <el-button class="colorStyle" type="warning" :plain="true" @click="onBtn">申请提现</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { Message } from "element-ui";
import $ from "jquery";
export default {
  data() {
    return {
      youMoney: "",
      myMoney: "",
      prove: "",
      phone: JSON.parse(localStorage.getItem("userData")).phone,
      money: "",
      code: "",
      value: "",
      rechargeFee: "",
      rewardBalance: "",
      rechargeMax: ""
    };
  },
  created() {
    u.getWithDraw(data => {
      if (data) {
        this.rechargeFee = data.data.rechargeFee / 100;
        this.rewardBalance = data.data.rewardBalance;
        this.rechargeMax = data.data.withDrawTop;
      }
    });
  },
  watch: {
    money: function(newMoney) {
      if (newMoney > this.rewardBalance) {
        Message({
          message: "提现金额超出",
          type: "error"
        });
        this.money = this.rewardBalance;
      }
    }
  },
  methods: {
    disabledwheel(evt) {
      evt = evt || window.event;
      if (evt.preventDefault) {
        // Firefox
        evt.preventDefault();
        evt.stopPropagation();
      } else {
        // IE
        evt.cancelBubble = true;
        evt.returnValue = false;
      }
      return false;
    },
    onMoneyChange() {
      if (
        this.money >= 200 &&
        this.money.trim() <= 50000 &&
        parseInt(this.money.trim()) / 100 === this.money / 100
      ) {
        this.prove = (this.money / 6.8).toFixed(8);
      }
    },
    getyzm() {
      if (this.phone.trim() === "") {
        return Message({
          message: "手机号码为空",
          type: "error"
        });
      }
      if (!/^1[34578]\d{9}$/.test(this.phone)) {
        return Message({
          message: "手机号码不存在",
          type: "error"
        });
      }
      // 倒计时
      let count = 60;
      $(".noteStyle")
        .css("pointer-events", "none")
        .text(count + "秒后重新发");
      t.timer = setInterval(function() {
        if (count > 0) {
          count = count - 1;
          $(".noteStyle").text(count + "秒后重新发");
        } else {
          $(".noteStyle").css("pointer-events", "");
          $(".noteStyle").text("获取验证码");
          count = 60;
          clearInterval(timer);
        }
      }, 1000);
      u.yzm({ phone: this.phone }, data => {
        if (data && data.code == "000000") {
          return Message({
            message: "验证码发送成功",
            type: "success"
          });
        } else {
          return Message({
            message: data.message,
            type: "error"
          });
        }
      });
    },
    onBtn() {
      let money = this.money.trim();
      let phone = this.phone.trim();
      if (!/^1[34578]\d{9}$/.test(this.phone)) {
        Message({
          message: "电话号码不存在，请重新输入",
          type: "error"
        });
        return false;
      }

      if (
        Number(money) % 100 !== 0 ||
        money === "" ||
        Number(money) < 200 ||
        Number(money) > 50000
      ) {
        return Message({
          message: `提现金额错误,200元起提,请输入100的整数倍,單次最高${
            this.rechargeMax
          }元。`,
          type: "error"
        });
      }
      if (this.code.trim() === "") {
        return Message({
          message: "验证码为空",
          type: "error"
        });
      }
      if (!/^1[34578]\d{9}$/.test(this.phone)) {
        return Message({
          message: "手机号码不存在",
          type: "error"
        });
      }
      if (!t.isNumber(this.money)) {
        return Message({
          message: "请输入数字",
          type: "error"
        });
      }
      if (!this.prove) {
        return Message({
          message: "200元起提",
          type: "error"
        });
      }
      u.goWithDraw(
        {
          cash: this.money,
          passport: this.prove,
          smsCode: this.code,
          phone: this.phone
        },
        data => {
          if (data && data.code == "200") {
            u.userInfo({ id: localStorage.getItem("userID") }, data => {
              if (data && data.code == "200") {
                localStorage.setItem("userData", JSON.stringify(data.data));
                Message({
                  message: "申请成功",
                  type: "success"
                });
                this.$router.push({ path: "/servicecentre" });
                u.setUser();
              }
            });
          } else {
            Message({
              message: data.message,
              type: "error"
            });
          }
        }
      );

      // this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
      //   confirmButtonText: "确定",
      //   // cancelButtonText: '',
      //   type: "success"
      // }).then(() => {
      //   this.$message({
      //     type: "success",
      //     message: "删除成功!"
      //   });
      // });
      // .catch(() => {
      //   this.$message({
      //     type: 'info',
      //     message: '已取消删除'
      // });
      // })
    }
  }
};
</script>

<style lang="less" scoped>
.WithdrawDeposit {
  height: 100%;
  background: white;
  .WithdrawDepositbottom {
    height: calc(100% - 50px);
    overflow-y: auto;
    &::-webkit-scrollbar {
      background-color: #f5f5f5;
      width: 3px;
    }
    &::-webkit-scrollbar-thumb {
      background-color: #d6d6d6;
    }
  }
  .title {
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid #f4f5f6;
    span:nth-child(1) {
      margin: 0px 10px 0px 20px;
      margin-left: 20px;
      line-height: 50px;
      background: #ffb001;
      width: 5px;
      height: 18px;
      display: inline-block;
    }
  }
  .boxStyle {
    margin: 30px 0px 0px 30px;
    display: flex;
    height: 38px;
    line-height: 38px;
    // border: 1px solid #000;
    width: 480px;
    div {
      // border: 1px solid #000;
      height: 38px;
      width: 165px;
    }
    input {
      border: 1px solid #ccc;
      width: 340px;
      padding-left: 10px;
    }
    .bdColor {
      background-color: #eee;
    }
    .noteStyle {
      border: none;
      background-color: #ffb001;
      height: 38px;
      color: white;
      width: 116px;
      margin-left: 20px;
    }
    .colorStyle {
      border: none;
      background-color: #ffb001;
      padding: 0px;
      width: 115px;
      height: 38px;
      color: white;
      margin-bottom: 20px;
    }
    .chose {
      width: 338px;
    }
    .wStyle {
      width: 226px;
    }
  }
  .moneyStyle {
    margin-bottom: 40px !important;
    height: 60px;
    .subTitle {
      width: 165px;
    }
    .subMoney {
      width: 340px;
      input {
        border: 1px solid #ccc;
        width: 100%;
        height: 38px;
      }
      span {
        color: #ffb001;
        font-size: 12px;
        display: inline-block;
      }
    }
  }
}
::placeholder {
  color: #ccc;
}
</style>
<style>
.el-input__inner {
  border-radius: 0px;
}
.padStyle .el-button {
  padding: 0px !important;
}
</style>
